<template>
  <div class="goods-list-item" @click="itemClick(goodsItem.iid)">
    <a href="javascript:;">
      <img :src="showImg" alt="" />
      <div>
        <p>{{ goodsItem.title }}</p>
        <span class="price">价格：{{ goodsItem.price }}</span>
        <span class="collect">收藏：{{ goodsItem.cfav }}</span>
      </div>
    </a>
  </div>
</template>

<script>
export default {
  name: "GoodsListItem",
  props: {
    goodsItem: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  computed: {
    showImg() {
      return this.goodsItem.image || this.goodsItem.show.img;
    }
  },
  methods: {
    itemClick(id) {
      this.$router
        .push({
          path: "/detail/" + id
        })
        .catch(err => {
          err;
        });
    }
  }
};
</script>

<style lang="less" scoped>
.goods-list-item {
  //   width: 50%;
  //   display: inline-block;
  box-sizing: border-box;
  padding: 0.5rem;
  //   border: 1px solid #eee;
  font-size: 0.8rem;
  img {
    width: 100%;
    border-radius: 0.3rem;
  }
  p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .price,
  .collect {
    color: var(--color-high-text);
  }
  .collect {
    margin-left: 1rem;
    background: url("~assets/img/common/collect.svg") left center no-repeat;
    background-size: contain;
    padding-left: 1rem;
  }
}
</style>
